<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>task1</title>
</head>

<body>
    <header>
        <h1>任务一</h1>
        <nav>
            <ul>
                <li><a href="#article1">文章一</a></li>
                <li><a href="#article2">文章二</a></li>
                <li><a href="#article3">文章三</a></li>
                <li><a href="#article4">文章四</a></li>
                <li><a href="#aside">侧栏</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article id="article1">
            <h2>文章一</h2>
            <h3>文章副标题</h3>
            <p><span>作者 发表时间</span></p>
            <p>披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。</p>
            <p>换行</p>
            <p>昔人已乘黄鹤去，此地空余<a href="https://en.wikipedia.org/wiki/Yellow_Crane_Tower">黄鹤楼</a>。黄鹤一去不复返，白云千载空悠悠。晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是？烟波江上使人愁。</p>
            <img src="images/1.jpg" alt="黄鹤楼">
            <p>昔人已乘黄鹤去，此地空余<a href="https://en.wikipedia.org/wiki/Yellow_Crane_Tower" target="_blank">黄鹤楼</a>。黄鹤一去不复返，白云千载空悠悠。晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是？烟波江上使人愁。</p>
        </article>
        <article id="article2">
            <h2>文章二</h2>
            <h3>文章副标题</h3>
            <p><span>作者 发表时间</span></p>
            <p>披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。</p>
            <p>换行</p>
            <p>昔人已乘黄鹤去，此地空余<a href="https://en.wikipedia.org/wiki/Yellow_Crane_Tower">黄鹤楼</a>。黄鹤一去不复返，白云千载空悠悠。晴川历历汉阳树，芳草萋萋鹦鹉洲。日暮乡关何处是？烟波江上使人愁。</p>
            <img src="images/1.jpg" alt="黄鹤楼">
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </article>
        <article id="article3">
            <h2>图片</h2>
            <figure>
                <figcaption>路飞手办</figcaption>
                <img src="images/2.jpg" alt="路飞">
            </figure>
            <figure>
                <figcaption>路飞手办</figcaption>
                <img src="images/2.jpg" alt="路飞">
            </figure>
            <figure>
                <figcaption>路飞手办</figcaption>
                <img src="images/2.jpg" alt="路飞">
            </figure>
            <figure>
                <figcaption>路飞手办</figcaption>
                <img src="images/2.jpg" alt="路飞">
            </figure>
            <figure>
                <figcaption>路飞手办</figcaption>
                <img src="images/2.jpg" alt="路飞">
            </figure>
            <figure>
                <figcaption>路飞手办</figcaption>
                <img src="images/2.jpg" alt="路飞">
            </figure>
        </article>
        <article id="article4">
            <h2>文章四</h2>
            <h3>文章副标题</h3>
            <p><span>作者 发表时间</span></p>
            <ol>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ol>
            <table border="1">
                <caption>下面是一个表格，border="1"</caption>
                <thead>
                    <tr>
                        <th>表头</th>
                        <th>表头</th>
                        <th>表头</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="javascript:;">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="javascript:;">操作</a></td>
                    </tr>
                    <tr>
                        <td>表内容单元格</td>
                        <td>表内容单元格</td>
                        <td><a href="javascript:;">操作</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>总计</td>
                        <td colspan="2">1000</td>
                    </tr>
                </tfoot>
            </table>
        </article>
        <aside id="aside">
            <h2>这是一个侧栏</h2>
            <h3>侧栏窗口标题</h3>
            <form>
                <p>请输入邮箱地址：
                    <input type="text" placeholder="这是一个文本输入框"></input>
                </p>
                <p>邮箱地址请按格式填写</p>
                <p>请输入密码
                    <input type="password" placeholder="密码"></input> 请重复输入密码
                    <input type="password" placeholder="密码"></input>
                </p>
                <p>密码为6到16位数字字母</p>
                <p>
                    性别：
                    <input type="radio" name="gender" value="m">男</input>
                    <input type="radio" name="gender" value="f">女</input>
                    城市：
                    <select>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>深圳</option>
                    </select> 爱好：
                    <input type="checkbox">运动</input>
                    <input type="checkbox">艺术</input>
                    <input type="checkbox">科学</input>
                    个人描述：
                    <textarea rows="3" cols="10">这是一个多行输入框</textarea>
                    <input type="submit" value="确认提交"></input>
                </p>
            </form>
        </aside>
    </main>
    <footer>
        版权所有&copy by menghao
    </footer>
</body>

</html>
